<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">{{title}}</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}">> {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div style="float:left;margin-top:10px;" v-if="state">
            <el-date-picker
              v-model="date1"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
              @change="timeChange"
            ></el-date-picker>
          </div>
          <div style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
              <el-input
                style="width: 136px;"
                size="small"
                placeholder="请输入内容"
                v-model.trim="inputValue"
                @keyup.enter.native="searchMsg"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  style="cursor: pointer;"
                  @click="searchMsg"
                ></i>
              </el-input>
              <div style="margin-left: 5px;">
                <el-button
                  class="edit"
                  @mousedown.native="editdown"
                  @mouseup.native="editup"
                  :class="{'active1' : newcolor1}"
                  size="small"
                  @click="editshow"
                  round
                  v-if="editBool"
                >修改
                </el-button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            :key="Math.random()"
            @current-change="handleCurrentChange"
            @row-click="clickHandler"
            :row-class-name="tableRowClassName"
            class="tableT"
          >
            <el-table-column label="客户简称" width="120">
              <template slot-scope="props">
                <span v-if="props.row.testWater == '是'">
                  <i class="iconfont icon-shuidi"></i>
                </span>
                <span v-if="props.row.customerActive == '是'">
                  <i class="iconfont icon-huo"></i>
                </span>
                <span>{{props.row.customerName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="需求名称" width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.postActive == '是'">
                  <i class="iconfont icon-huo"></i>
                </span>
                <span
                  style="cursor: pointer; color:#1198ff;"
                  @click="viewdetail(scope.row)"
                >{{scope.row.name}}{{scope.row.flag}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="postLevel" label="职位级别" width="100"></el-table-column>
            <el-table-column prop="introducer" label="发布人" width="80"></el-table-column>
            <el-table-column prop="area" label="所属区域" width="90"></el-table-column>
            <el-table-column prop="number" label="需求人数" width="90"></el-table-column>
            
            <el-table-column label="需求程度" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  v-if="scope.row.nextStar == 3"
                  style="background-color: #FF1C1D;color: #fff;"
                >困难
                </el-button>
                <el-button
                  size="mini"
                  v-if="scope.row.nextStar == 2"
                  style="background-color: #2931FE;color: #fff;"
                >普通
                </el-button>
                <el-button
                  size="mini"
                  v-if="scope.row.nextStar == 1"
                  style="background-color: #FFC027;color: #fff;"
                >简单
                </el-button>
                <span
                  v-if="scope.row.nextStar == 0"
                >空</span>
              </template>
            </el-table-column>
            
            <el-table-column label="组别" width="150">
              <template slot-scope="scope" v-if="scope.row.nextHr">
                <el-button
                  size="mini"
                  v-for="item in scope.row.nextHr"
                  :key="item"
                  style="background-color: #3598f9;color: #fff;"
                >{{item}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="salaryCap" label="薪资上限" width="120"></el-table-column>
            <el-table-column label="关键词" width="300">
              <template slot-scope="scope" v-if="scope.row.ordinaryKeywords">
                <el-button
                  size="mini"
                  v-for="item in scope.row.ordinaryKeywords"
                  :key="item"
                  style="background-color: #3598f9;color: #fff;"
                >{{item}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="查看简历">
              <template slot-scope="props">
                <el-button @click="resume(props.row.no)" size="mini" type="primary">查看简历</el-button>
              </template>
            </el-table-column>
            <el-table-column type="expand" label="功能区" width="80">
              <template slot-scope="props">
                <el-row>
                  <el-col>
                    <el-col :span="10" :offset="1" style="text-align: left;">
                      <div class="duty">需求编号</div>
                      <span
                        style="margin-left: 18px;"
                      >{{props.row.no}}</span>
                    
                    </el-col>
                  </el-col>
                  
                  <el-col :span="10" :offset="1">
                    <div class="duty">职位职责</div>
                    <el-input
                      type="textarea"
                      v-model="props.row.duty"
                      :autosize="{minRows:4}"
                      disabled
                      resize="none"
                    ></el-input>
                  </el-col>
                  <el-col :span="12" :offset="1">
                    <div class="duty">任职要求</div>
                    <el-input
                      type="textarea"
                      v-model="props.row.require"
                      :autosize="{minRows:4}"
                      disabled
                      resize="none"
                    ></el-input>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="简历"
      class="addP addPP"
      :visible.sync="resumeDialogVisible"
      width="415px"
      :before-close="resumeCancel"
    >
      <div class="box">
        <div>
          <p>
            <strong>面试人员简历</strong>
          </p>
          <div v-if="resumeTotal == 0" style="text-align:center;margin-top:10px;">暂无简历信息</div>
          <div v-else class="nameBox">
            <div class="name" v-for="item in resumeList" :key="item.id">
              <a :href="item.group+'/'+item.fileAddress" target="_blank">{{item.name}}</a>
            </div>
          </div>
        </div>
        <div style="margin-top:20px;">
          <p>
            <strong>入职人员简历</strong>
          </p>
          <div v-if="entryTotal == 0" style="text-align:center;margin-top:10px;">暂无简历信息</div>
          <div v-else class="nameBox">
            <div class="name" v-for="item in entryList" :key="item.id">
              <a :href="item.group+'/'+item.fileAddress" target="_blank">{{item.name}}</a>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="editdialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何职位</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleOpen">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    
    <div v-if="type == 2">
      <position-edit
        ref="positionEdit"
        @sendSuccess="initMsg1"
        @Rehide="editHide"
        :current-data="currentRow"
        v-show="addShow"
      ></position-edit>
    </div>
    <div v-if="type == 3">
      <position-detail
        ref="positionDetail"
        v-show="addShow"
        :detail-data="detaildata"
      ></position-detail>
    </div>
  
  </div>
</template>
<script>
  
  import PositionEdit from "./positionedit.vue";
  import PositionDetail from "./positiondetail.vue";
  import axios from "axios";
  import tagsView from "../../store/modules/tagsView";
  
  export default {
    name: "positionpreset",
    data() {
      return {
        date1: "",
        title: "",
        newcolor1: false,
        inputValue: "",
        tableData: [],
        currentPage: 1,
        pagesize: 15,
        currentRow: null,
        totalcount: 0,
        addShow: false,
        type: null,
        resumeList: [],
        resumeTotal: null,
        entryList: [],
        entryTotal: null,
        secondtitle: "",
        secondshow: false,
        editdialogVisible: false,
        detaildata: "",
        rowId: "",
        state: false,
        editBool: false,
        resumeDialogVisible: false
      };
    },
    created() {
      if (tagsView.state.identity == 7) {
        this.editBool = true;
      }
      this.title = this.$route.meta.title;
      this.success();
      
      axios
        .post(this.url + "/auth/getModularByMenu", {
          menuId: 2
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            for (let i = 0, len = res.data.data.length; i < len; i++) {
              if (res.data.data[i].modularId == "1001") {
              
              } else if (res.data.data[i].modularId == "1002") {
                this.editBool = true;
              } else if (res.data.data[i].modularId == "1003") {
              
              } else if (res.data.data[i].modularId == "1004") {
                this.state = true;
              } else if (res.data.data[i].modularId == "1005") {
              
              } else if (res.data.data[i].modularId == "1006") {
              
              } else {
                this.editBool = false;
                this.state = false;
              }
            }
          }
        });
    },
    methods: {
      timeChange(val) {
        this.currentPage = 1;
        axios
          .post(this.url + "/demand/findByPages", {
            condition: this.inputValue,
            selectTime: val,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              let data = res.data.data.list;
              for (let i = 0, leng = data.length; i < leng; i++) {
                
                data[i].nextHr = data[i].nextHr.split(",")
                
                if (data[i].nextHr.length == 1 && data[i].nextHr[0] == "") {
                  data[i].nextHr = null
                }
              }
              for (let i = 0, lenG = data.length; i < lenG; i++) {
                data[i].salaryCap =
                  data[i].salaryCap + "k" + " " + "*" + " " + data[i].salaryNum;
                if (data[i].ordinaryKeywords == null) {
                  data[i].ordinaryKeywords = "";
                }
                data[i].ordinaryKeywords = data[i].ordinaryKeywords.split(",");
                if (
                  data[i].ordinaryKeywords.length == 1 &&
                  data[i].ordinaryKeywords[0] == ""
                ) {
                  data[i].ordinaryKeywords = null;
                }
              }
              this.tableData = data;
              this.totalcount = res.data.data.total;
              
              for (let i = 0, len = this.tableData.length; i < len; i++) {
                this.tableData[i].dutyArr = this.tableData[i].duty.split(/\n/);
                this.tableData[i].dutyLen = this.tableData[i].dutyArr.length;
              }
              for (let i = 0, len = this.tableData.length; i < len; i++) {
                let num = 0;
                for (
                  let j = 0, lengt = this.tableData[i].dutyArr.length;
                  j < lengt;
                  j++
                ) {
                  if (this.tableData[i].dutyArr[j].length > 48) {
                    num += Math.floor(this.tableData[i].dutyArr[j].length / 48);
                  }
                }
                this.tableData[i].dutyLen += num;
              }
              for (let i = 0, len = this.tableData.length; i < len; i++) {
                this.tableData[i].requireArr = this.tableData[i].require.split(
                  /\n/
                );
                this.tableData[i].requireLen = this.tableData[
                  i
                  ].requireArr.length;
              }
              for (let i = 0, len = this.tableData.length; i < len; i++) {
                let num = 0;
                for (
                  let j = 0, lengt = this.tableData[i].requireArr.length;
                  j < lengt;
                  j++
                ) {
                  if (this.tableData[i].requireArr[j].length > 48) {
                    num += Math.floor(
                      this.tableData[i].requireArr[j].length / 48
                    );
                  }
                }
                this.tableData[i].requireLen += num;
              }
            }
          })
      },
      success() {
        axios
          .post(this.url + "/demand/findByPages", {
            // 用人需求表格请求
            condition: this.inputValue,
            selectTime: this.date1,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              let data = res.data.data.list;
              for (let i = 0, leng = data.length; i < leng; i++) {
                data[i].nextHr = data[i].nextHr.split(",");
                if (data[i].nextHr.length == 1 && data[i].nextHr[0] == "") {
                  data[i].nextHr = null;
                }
              }
              for (let i = 0, lenG = data.length; i < lenG; i++) {
                data[i].salaryCap =
                  data[i].salaryCap + "k" + " " + "*" + " " + data[i].salaryNum;
                if (data[i].ordinaryKeywords == null) {
                  data[i].ordinaryKeywords = "";
                }
                data[i].ordinaryKeywords = data[i].ordinaryKeywords.split(",");
                if (
                  data[i].ordinaryKeywords.length == 1 &&
                  data[i].ordinaryKeywords[0] == ""
                ) {
                  data[i].ordinaryKeywords = null;
                }
              }
              this.tableData = data;
              this.totalcount = res.data.data.total;
              for (let i = 0, len = this.tableData.length; i < len; i++) {
                this.tableData[i].dutyArr = this.tableData[i].duty.split(/\n/);
                this.tableData[i].dutyLen = this.tableData[i].dutyArr.length;
              }
              for (let i = 0, len = this.tableData.length; i < len; i++) {
                let num = 0;
                for (
                  let j = 0, lengt = this.tableData[i].dutyArr.length;
                  j < lengt;
                  j++
                ) {
                  if (this.tableData[i].dutyArr[j].length > 48) {
                    num += Math.floor(this.tableData[i].dutyArr[j].length / 48);
                  }
                }
                this.tableData[i].dutyLen += num;
              }
              for (let i = 0, len = this.tableData.length; i < len; i++) {
                this.tableData[i].requireArr = this.tableData[i].require.split(
                  /\n/
                );
                this.tableData[i].requireLen = this.tableData[
                  i
                  ].requireArr.length;
              }
              for (let i = 0, len = this.tableData.length; i < len; i++) {
                let num = 0;
                for (
                  let j = 0, lengt = this.tableData[i].requireArr.length;
                  j < lengt;
                  j++
                ) {
                  if (this.tableData[i].requireArr[j].length > 48) {
                    num += Math.floor(
                      this.tableData[i].requireArr[j].length / 48
                    );
                  }
                }
                this.tableData[i].requireLen += num;
              }
            }
          })
        this.addShow = false;
        this.secondshow = false;
        this.type = null;
      },
      //搜索功能
      searchMsg() {
        this.currentPage = 1;
        var condi = {
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize,
          selectTime: this.date1
        };
        axios.post(this.url + "/demand/findByPages", condi).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            let data = res.data.data.list;
            for (let i = 0, leng = data.length; i < leng; i++) {
              
              data[i].nextHr = data[i].nextHr.split(",");
              if (data[i].nextHr.length == 1 && data[i].nextHr[0] == "") {
                data[i].nextHr = null;
              }
              
            }
            for (let i = 0, lenG = data.length; i < lenG; i++) {
              data[i].salaryCap =
                data[i].salaryCap + "k" + " " + "*" + " " + data[i].salaryNum;
              if (data[i].ordinaryKeywords == null) {
                data[i].ordinaryKeywords = "";
              }
              data[i].ordinaryKeywords = data[i].ordinaryKeywords.split(",");
              if (
                data[i].ordinaryKeywords.length == 1 &&
                data[i].ordinaryKeywords[0] == ""
              ) {
                data[i].ordinaryKeywords = null;
              }
            }
            this.tableData = data;
            this.totalcount = res.data.data.total;
            for (let i = 0, len = this.tableData.length; i < len; i++) {
              this.tableData[i].dutyArr = this.tableData[i].duty.split(/\n/);
              this.tableData[i].dutyLen = this.tableData[i].dutyArr.length;
            }
            for (let i = 0, len = this.tableData.length; i < len; i++) {
              let num = 0;
              for (
                let j = 0, lengt = this.tableData[i].dutyArr.length;
                j < lengt;
                j++
              ) {
                if (this.tableData[i].dutyArr[j].length > 48) {
                  num += Math.floor(this.tableData[i].dutyArr[j].length / 48);
                }
              }
              this.tableData[i].dutyLen += num;
            }
            for (let i = 0, len = this.tableData.length; i < len; i++) {
              this.tableData[i].requireArr = this.tableData[i].require.split(
                /\n/
              );
              this.tableData[i].requireLen = this.tableData[
                i
                ].requireArr.length;
            }
            for (let i = 0, len = this.tableData.length; i < len; i++) {
              let num = 0;
              for (
                let j = 0, lengt = this.tableData[i].requireArr.length;
                j < lengt;
                j++
              ) {
                if (this.tableData[i].requireArr[j].length > 48) {
                  num += Math.floor(
                    this.tableData[i].requireArr[j].length / 48
                  );
                }
              }
              this.tableData[i].requireLen += num;
            }
          }
        });
      },
      resume(val) {
        axios
          .post(this.url + "/demand/getResumes", {
            no: val
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.resumeList = res.data.data;
              this.resumeTotal = this.resumeList.length;
            }
          });
        axios
          .post(this.url + "/demand/getEntrys", {
            no: val
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.entryList = res.data.data;
              this.entryTotal = this.entryList.length;
            }
          });
        this.resumeDialogVisible = true;
      },
      //鼠标按下修改按钮
      editdown() {
        this.newcolor1 = true;
      },
      //修改按钮弹起
      editup() {
        this.newcolor1 = false;
      },
      //点击当前行触发事件
      clickHandler(row) {
        this.rowId = row.id;
      },
      //修改弹出框出现
      handleOpen() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = "hidden";
      },
      //关闭修改弹出框
      handleClose(done) {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = "auto";
      },
      resumeCancel() {
        this.resumeDialogVisible = false;
        document.documentElement.style.overflow = "auto";
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.success();
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.success();
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //表格显示
      tableshow() {
        this.initMsg1();
      },
      initMsg1(row) {
        this.addShow = false;
        this.secondshow = false;
        this.$refs.singleTable.setCurrentRow(row);
        this.type = null;
        this.success();
      },
      //点击显示修改模块
      editshow() {
        if (this.currentRow == null) {
          this.editdialogVisible = !this.editdialogVisible;
        } else {
          this.addShow = !this.addShow;
          this.secondtitle = "修改需求";
          this.secondshow = true;
          this.type = 2;
        }
      },
      //取消按钮隐藏修改页面
      editHide() {
        this.addShow = !this.addShow;
        this.secondshow = false;
        this.success();
        this.currentRow = null;
      },
      //显示查看需求模块
      viewdetail(val) {
        this.detaildata = val;
        this.addShow = !this.addShow;
        this.secondtitle = "查看需求";
        this.secondshow = !this.secondshow;
        this.type = 3;
      },
      tableRowClassName({row}) {
        if (row.status == "暂停") {
          return "suspendRow";
        } else if (row.status == "关闭") {
          return "closeRow";
        } else {
          return "";
        }
      }
    },
    watch: {
      inputValue: function (newValue, oldValue) {
        if (newValue === "") {
          this.currentPage = 1;
          this.success();
        }
      }
    },
    components: {
      PositionEdit,
      PositionDetail
    }
  };
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .tabletitle {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
  }
  
  .edit {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 7px 15px !important;
  }
  
  .edit:hover {
    color: #fff !important;
  }
  
  .active1 {
    background: linear-gradient(to bottom, #1cf1e3 0%, #379b94 100%);
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .textactive {
    color: #1099ff;
  }
  
  .demo-table-expand {
    font-size: 0;
  }
  
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  
  .duty {
    font-size: 14px;
    font-weight: 700;
    color: #47adff;
    text-align: left;
    margin-left: 18px;
  }
  
  .box {
    min-height: 200px;
  }
  
  .nameBox {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    margin-top: 10px;
  }
  
  .name {
    width: 76px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #eeeeee;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  
  .name a {
    text-decoration: none;
    color: #757575;
  }
</style>
